<template>
  <div id="login">
    <van-nav-bar title="Ammon" @click-left="onClickLeft">
      <van-icon name="arrow-left" slot="left"/>
    </van-nav-bar>
    <div class="conn">
      <h1>注册/登录</h1>
      <van-cell-group>
        <van-field v-model="email" center clearable label="QQ邮箱" placeholder="请输入您的QQ邮箱">
          <van-button slot="button" size="small" type="primary" @click="verify">发送验证码</van-button>
        </van-field>
        <van-field v-model="code" placeholder="请输入验证码" label="验证码"></van-field>
      </van-cell-group>
      <!-- 下一步按钮,让用户去登录,其他的放到用户个人中心去设定即可 -->
      <van-button size="large" @click="goLogin">下一步</van-button>
    </div>
    <div class="third_part">
      <van-icon name="wechat" @click="wechatLogin"></van-icon>
      <van-icon name="alipay" @click="alipayLogin"></van-icon>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      email: '',
      code: ''
    }
  },
  methods: {
    wechatLogin() {
      this.$toast('微信登录暂未开放,敬请期待')
    },
    alipayLogin() {
      this.$toast('支付宝登录暂未开放,敬请期待')
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    verify() {
      // 调用后台接口,发送验证给用户
      this.$toast('你的验证码是1122')
    },
    goLogin() {
      this.$toast('登录成功 ^_^')
    }
  }
}
</script>
<style lang="stylus" scoped>
.conn
  h1
    font-size 0.8rem
    font-weight 600
    padding 0.4rem 0.2rem
.third_part
  padding-top 2rem
  width 100%
  text-align center
  font-size 1rem
</style>
